<%# locals: (tag:) %>

<div id="<%= dom_id(tag) %>" class="flex justify-between items-center p-4 bg-container">
  <div class="flex w-full items-center gap-2.5">
    <%= render partial: "shared/color_avatar", locals: { name: tag.name, color: tag.color } %>
    <p class="text-primary text-sm truncate">
      <%= tag.name %>
    </p>
  </div>
  <div class="justify-self-end">
    <%= render DS::Menu.new do |menu| %>
      <% menu.with_item(variant: "link", text: t(".edit"), href: edit_tag_path(tag), icon: "pencil", data: { turbo_frame: "modal" }) %>

      <% if tag.transactions.any? %>
        <% menu.with_item(
          variant: "link",
          text: t(".delete"),
          href: new_tag_deletion_path(tag),
          icon: "trash-2",
          frame: :modal
        ) %>
      <% else %>
        <% menu.with_item(
          variant: "button",
          text: t(".delete"),
          href: tag_path(tag),
          icon: "trash-2",
          method: :delete,
          confirm: CustomConfirm.for_resource_deletion(tag.name)
        ) %>
      <% end %>
    <% end %>
  </div>
</div>
